<template>
	<view class="clock-container">
		<!-- 日期显示 -->
		<view class="date-display">
			<text class="date">{{ formattedDate }} {{ weekday }}</text>
		</view>

		<!-- 时钟主体 -->
		<view class="clock">
			<!-- 小时 -->
			<view class="time-block hour-block">
				<view class="flip-container">
					<view class="flip-card top" :style="{transform: `rotateX(${hourFlip ? 180 : 0}deg)`}">
						<view class="number">{{ currentHours }}</view>
					</view>
					<view class="flip-card bottom" :style="{transform: `rotateX(${hourFlip ? 0 : -180}deg)`}">
						<view class="number">{{ nextHours }}</view>
					</view>
				</view>
			</view>

			<!-- 分隔符 -->
			<view class="colon">:</view>

			<!-- 分钟 -->
			<view class="time-block minute-block">
				<view class="flip-container">
					<view class="flip-card top" :style="{transform: `rotateX(${minuteFlip ? 180 : 0}deg)`}">
						<view class="number">{{ currentMinutes }}</view>
					</view>
					<view class="flip-card bottom" :style="{transform: `rotateX(${minuteFlip ? 0 : -180}deg)`}">
						<view class="number">{{ nextMinutes }}</view>
					</view>
				</view>
			</view>

			<!-- 分隔符 -->
			<view class="colon">:</view>

			<!-- 秒钟 -->
			<view class="time-block second-block">
				<view class="flip-container">
					<view class="flip-card top" :style="{transform: `rotateX(${secondFlip ? 180 : 0}deg)`}">
						<view class="number">{{ currentSeconds }}</view>
					</view>
					<view class="flip-card bottom" :style="{transform: `rotateX(${secondFlip ? 0 : -180}deg)`}">
						<view class="number">{{ nextSeconds }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部励志语句 - 每5分钟切换一次 -->
		<view class="slogan">{{ currentSlogan }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTime: new Date(),
				hourFlip: false,
				minuteFlip: false,
				secondFlip: false,
				currentHours: '00',
				nextHours: '00',
				currentMinutes: '00',
				nextMinutes: '00',
				currentSeconds: '00',
				nextSeconds: '00',
				slogans: [
					"我现在没空，忙着优秀！--李华志",
					"时间是最好的老师，但不幸的是，它杀死了所有的学生。",
					"今天的努力，是明天的实力。",
					"不积跬步，无以至千里；不积小流，无以成江海。",
					"成功不是将来才有的，而是从决定去做的那一刻起，持续累积而成。",
					"每一个不曾起舞的日子，都是对生命的辜负。",
					"时间就像海绵里的水，只要愿挤，总还是有的。",
					"不要等待机会，而要创造机会。",
					"今天的汗水，是明天的收获。",
					"时间不会倒流，人生不会重来。"
				],
				currentSlogan: "我现在没空，忙着优秀！--李华志",
				lastMinute: -1
			}
		},
		computed: {
			formattedDate() {
				const year = this.currentTime.getFullYear();
				const month = this.currentTime.getMonth() + 1;
				const day = this.currentTime.getDate();
				return `${year}年${month}月${day}日`;
			},
			weekday() {
				const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				return weekdays[this.currentTime.getDay()];
			}
		},
		mounted() {
			this.updateTime();
			setInterval(this.updateTime, 1000);
		},
		methods: {
			updateTime() {
				const newTime = new Date();
				const hours = newTime.getHours().toString().padStart(2, '0');
				const minutes = newTime.getMinutes().toString().padStart(2, '0');
				const seconds = newTime.getSeconds().toString().padStart(2, '0');

				// 每5分钟更换一次励志语句
				if (newTime.getMinutes() !== this.lastMinute && newTime.getMinutes() % 5 === 0) {
					this.currentSlogan = this.slogans[Math.floor(Math.random() * this.slogans.length)];
					this.lastMinute = newTime.getMinutes();
				}

				// 小时变化时触发翻页动画
				if (hours !== this.currentHours) {
					this.nextHours = hours;
					this.hourFlip = true;
					setTimeout(() => {
						this.currentHours = hours;
						this.hourFlip = false;
					}, 500);
				}

				// 分钟变化时触发翻页动画
				if (minutes !== this.currentMinutes) {
					this.nextMinutes = minutes;
					this.minuteFlip = true;
					setTimeout(() => {
						this.currentMinutes = minutes;
						this.minuteFlip = false;
					}, 500);
				}

				// 秒钟变化时触发翻页动画
				if (seconds !== this.currentSeconds) {
					this.nextSeconds = seconds;
					this.secondFlip = true;
					setTimeout(() => {
						this.currentSeconds = seconds;
						this.secondFlip = false;
					}, 1000);
				}

				this.currentTime = newTime;
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{
		box-sizing: border-box; 
	}
	/* 基础样式 - 纯黑背景 */
	page {
		height: 100%;
		width: 100%;
		overflow: hidden;
		// background-color: #000;
	}

	.clock-container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		width: 100vw;
		color: #fff;
		padding: 20px 0;
		background-color: #000;
	}

	/* 日期显示样式 */
	.date-display {
		margin-bottom: 10px;

		.date {
			font-size: 28px;
			color: rgba(255, 255, 255, 0.9);
			font-weight: 300;
			letter-spacing: 1px;
		}
	}

	/* 时钟主体 - 超大数字 */
	.clock {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 70vh;
	}

	.time-block {
		position: relative;
		width: 25%;
		height: 100%;
		margin: 0 5px;
		perspective: 1000px;
	}

	.flip-container {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.flip-card {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #111;
		border: 2px solid rgba(255, 255, 255, 0.1);
		border-radius: 8px;
		overflow: hidden;
		backface-visibility: hidden;
		transform-style: preserve-3d;
		transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);

		.number {
			font-size: 30vh;
			font-weight: 300;
			color: #fff;
			line-height: 1;
		}
	}

	.flip-card.top {
		top: 0;
		transform-origin: bottom center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.flip-card.bottom {
		bottom: 0;
		transform-origin: top center;
		border-top: 1px solid rgba(255, 255, 255, 0.05);
	}

	/* 分隔符样式 */
	.colon {
		font-size: 15vh;
		color: rgba(255, 255, 255, 0.9);
		margin: 0 5px;
		position: relative;
		top: -5vh;
	}

	/* 底部励志语句 */
	.slogan {
		font-size: 24px;
		color: rgba(255, 255, 255, 0.9);
		letter-spacing: 2px;
		margin-top: 20px;
		text-align: center;
		padding: 0 20px;
	}

	/* 横屏优化 */
	@media (orientation: landscape) {
		.clock {
			height: 50vh;
		}

		.flip-card .number {
			font-size: 30vh;
		}

		.colon {
			font-size: 20vh;
			top: -7vh;
		}

		.slogan {
			font-size: 28px;
		}
	}

	/* 竖屏优化 */
	@media (orientation: portrait) {
		.clock {
			flex-direction: column;
			height: 60vh;
		}

		.time-block {
			width: 80%;
			height: 25%;
			margin: 5px 0;
		}

		.flip-card .number {
			font-size: 20vw;
		}

		.colon {
			font-size: 10vw;
			top: 0;
			margin: 5px 0;
		}
	}
</style>